<template>
  <div class="threeBarChart"></div>
</template>

<script>
import * as echarts from 'echarts';
import { getMonthEquipOutput } from '/@/api/visualizing/master'
import lodash from 'lodash'
import { formatStringDate } from '/@/utils/formatTime'
export default {
  name: '',
  data() {
    return {
      myChart: null,

    }
  },
  methods: {
    setChart(xAxisData=[], totalData=[], qualifiedData=[]) {
      const option = {
        tooltip: {
          trigger: 'axis',
        },
        legend: [
          {
            top: '1%',
            right: '2%',
            itemWidth: 7,
            itemHeight: 7,
            textStyle: {
              color: '#5CB1C1',
            }
          },
        ],
        grid:
        {
          top: '3%',
          left: '3%',
          right: '5%',
          bottom: '8%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              interval: 0,
              color: '#61B9C8',
              fontSize: 10
            },
            axisLine: {
              symbol: ['none', 'arrow'],
              symbolSize: [6, 6],
              symbolOffset: [0, 5],
              lineStyle: {
                color: '#122C49'
              }
            },
            axisTick: { show: false },
            data: xAxisData
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              color: '#61B9C8',
              fontSize: 9,
              showMaxLabel: false,
            },
            axisLine: {
              show:true,
              symbol: ['none', 'arrow'],
              symbolSize: [6, 6],
              symbolOffset: [0, 5],
              lineStyle: {
                color: '#122C49'
              }
            },
            axisTick: {
              length: 3
            },
            name: '(产量)',
            nameGap: -5,
            nameTextStyle: {
              color: '#61B9C8',
              fontSize: 9,
              align: 'right',
              padding: [0, 6, 0, 0]
            },
            splitLine: { show: false }
          }
        ],
        series: [
          {
            name: '产量',
            type: 'bar',
            barWidth: 9,
            data: totalData,
            itemStyle: {
              borderRadius: [3, 3, 0, 0],
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0, color: 'rgba(252,145,134,1)' // 0% 处的颜色
                  }, {
                    offset: 1, color: 'rgba(241,88,135,1)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              } //背景渐变色
            }
          },
          {
            name: '合格产量',
            type: 'bar',
            barWidth: 9,
            data: qualifiedData,
            itemStyle: {
              borderRadius: [3, 3, 0, 0],
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0, color: 'rgba(144,20,238,1)' // 0% 处的颜色
                  }, {
                    offset: 1, color: 'rgba(74,8,211,1)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              } //背景渐变色
            }
          }
        ]
      };
      if (!this.myChart) this.myChart = echarts.init(this.$el);
      this.myChart.setOption(option);
    },
    async getMonthEquipOutput() {
      const { code, data } = await getMonthEquipOutput()
      if (code !== 0) return
      const dataList = lodash.get(data, 'list', [])
      if (dataList.length > 0) {
        const xAxisData = [];
        const totalData = [];
        const qualifiedData = [];
        dataList.map(({ productionDate, totalCount, qualifiedCount }) => {
          xAxisData.push(formatStringDate(productionDate))
          totalData.push(totalCount)
          qualifiedData.push(qualifiedCount)
        })
        this.setChart(xAxisData, totalData, qualifiedData);
      }
    },
    resize() {
      this.myChart && this.myChart.resize();
    }
  },
  mounted() {
    this.getMonthEquipOutput();
    setInterval(() => {
      this.getMonthEquipOutput();
    }, 1000 * 3);
  },
}
</script>

<style lang="less" scoped>
.threeBarChart {
  height: calc(100% - 20px);
  width: 100%;
}
</style>